<template>
  <div class="content">
    <div class="main">
      <img src="../../assets/life/15.png" alt="" />
      <div class="header">
        <div class="icon" @click="goService">
          <i class="iconfont icon-zuojiantou"></i>
        </div>
        <div class="title">宜居储值卡</div>
        <div class="btn">兑换</div>
      </div>
      <div class="middle">
        <div class="price">{{ price }}</div>
        <div class="word">当前余额</div>
      </div>
    </div>
    <div class="footer">
      <div class="money" v-for="(item, index) in list" :key="index">
        <div class="left">
          <span class="war1">￥{{ item.price }}</span>
          <span class="war2">赠送{{ item.title }}元</span>
        </div>
        <div class="right">
          <span>{{ item.name }}</span>
          <button @click="open(index)">购买</button>
        </div>
      </div>
    </div>
    <!-- 购买弹框 -->
    <van-dialog  show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
     data(){
       return{
        //  show:false,
         list:[
           {
             price:"100.00",
             title:"100",
             name:"新人优惠"
           },
           {
             price:"300.00",
             title:"20",
           },
           {
             price:"500.00",
             title:"40",
           },
           {
             price:"1000.00",
             title:"100",
           },
           {
             price:"1200.00",
             title:"120",
           },
           {
             price:"2000.00",
             title:"250",
           }
         ],
         price:"0.00"
       }
     },
     methods:{
       goService(){
         this.$router.push({path: "/service"})
       },
      async open(i){
        
        Dialog.confirm({
        title: '确认购买',
      }).then(
        ()=>{
          //确认
          this.price = parseInt(this.price) + parseInt(this.list[i].price) + parseInt(this.list[i].title);
        }
      ).catch(
        ()=>{
          //取消
        }
      );
       }  
    },
    computed:{
      
    }
}
</script>

<style lang="less" scoped>
.content{
  height: 100%;
  background: #c9c9c9;

.main {
  width: 100%;
  height: 500px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .header {
    position: absolute;
    top: 72px;
    display: flex;
    height: 40px;
    width: 95%;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px;
    .icon {
      height: 40px;
      line-height: 40px;
      color: #ffffff;
      i {
        font-size: 0.8rem;
      }
    }
    .title {
      height: 40px;
      line-height: 40px;
      font-size: 55px;
      color: #ffffff;
    }
    .btn {
      height: 40px;
      line-height: 40px;
      font-size: 35px;
      color: #ffffff;
    }
  }
  .middle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .price {
      text-align: center;
      color: #ffffff;
      font-size: 1rem;
    }
    .word {
      color: #ffffff;
      font-size: 0.4rem;
      text-align: center;
    }
  }
}
.footer {
  // background: #c9c9c9;

  .money {
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    margin: 0px 15px 2px 15px;
    background: #ffffff;
    .left {
      display: flex;
      flex-direction: column;
      margin: 25px 0;
      .war1 {
        font-size: 40px;
        opacity: 0.8;
      }
      .war2 {
        font-size: 20px;
        color: #7a7a7a;
      }
    }
    .right {
      span {
        font-size: 15px;
        color: #fe6a6b;
      }
      button {
        font-size: 15px;
        background: #409bfe;
        color: #ffffff;
        border: none;
        border-radius: 5px;
      }
    }
  }
}
}
</style>